<script setup>
// 提示框
import baseModel from "@/components/baseModel/baseModel.vue";
import { reactive, ref } from "vue";
// 选择素材库视频
import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import request from "@/common/utils/request";
import { message } from "ant-design-vue";
import utils from '@/common/utils/utils'
// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
const vipModalRef = ref()
const emit = defineEmits(["submitFn:id"]);

const state = reactive({
    // 网络视频的地址
    text_source: '',
    // 素材的类型
    from_type: 1,
    // 选择的视频id
    multimedia_id: '',
    textg: '',
    // 素材时长
    number:null
});
const showVideoUrl = ref('')
// 选择素材库视频开关
const addVisible = ref(false)
// 提交按钮的loding
const submitLoding = ref(false)

const dialog = ref(null);
const vipVisible = ref(false)

// 点击确定, 创建我的灵感库项目
const handleOk = async () => {

    submitLoding.value = true
    const { from_type, multimedia_id } = state
    const params = state.from_type == 0 ? {
        from_type,
        multimedia_id,
        text_source: ''
    } : {
        from_type,
        multimedia_id,
        text_source: state.text_source
    }
    if (state.from_type == 0 && !multimedia_id) {
        submitLoding.value = false
        return message.error('请选择素材库视频!')
    }
    if (state.from_type == 1 && !state.text_source.trim()) {
        submitLoding.value = false
        return message.error('请粘贴短视频链接!')
    }
    try {

        
        try {
            // 查询积分, 积分不足则走不到这一步
            const res = await getSplitNum({ number: state.from_type == 0 ? state.number : 1 })
            // 获取积分消耗提示内容
            const content = utils.useText(res)
            try {
                // 确认消耗
                await utils.kd({ content,res })
            } catch (error) {
                submitLoding.value = false
                return
            }
        } catch (error) {
            submitLoding.value = false
            vipVisible.value = true
            vipModalRef.value && vipModalRef.value.openBuyVisible()
            return

        }

        const res = await request.post('work_ai', '/user/shotstack/inspirationText/add', params)
        console.log(res, '正在解析的结果');
        emit("submitFn", res.result.id);
        submitLoding.value = false
        dialog.value.closeModal()
    } catch (error) {
        submitLoding.value = false
    }
}



// 关闭弹窗, 获取选择的文件
const closeChooseMaterial = (data) => {
    data && (() => {
        showVideoUrl.value = data.material_url
        state.multimedia_id = data.id
    })()
    addVisible.value = false;
    console.log(data, '选择的视频');
    // 获取向上取整分钟数
    state.number = utils.getT(data.material_duration) 
};


// 获取剪辑次数
const getSplitNum = (params={}) => {
    const { number=1, init=false } = params
    return new Promise(async (resolve, reject) => {
        const res = await request.get('work_ai', '/user/shotstack/video/conver/text/config', {number})
        console.log(res, '剪辑次数123123');
        const textg = `当前剩余${res.pointInfo?.current}${res.pointInfo.unit}${res.pointInfo.name}，每次[${res.numberInfo.name}]将消耗[${res.pointInfo.consumes}]${res.pointInfo.unit}${res.pointInfo.name}`;
        state.textg = textg
        if (res.usable != 1 && !init) {
            reject(res)
            return
        }
        resolve(res)
    });
}


const openDialog = () => {
    dialog.value.showModal();
    getSplitNum({number:1, init:true})
};

const closeDialog = () => {
    dialog.value.closeModal();
};

// 弹窗关闭 清空数据
const isClose = () => {
    state.from_type = 1
    state.multimedia_id = ''
    state.text_source = ''
    showVideoUrl.value = ''
    submitLoding.value = false
}

defineExpose({
    openDialog,
    closeDialog,
});

</script>

<template>
    <div>
        <baseModel ref="dialog" :contentWidth="650" @cancel="closeDialog()" @submit="submitFn" @isClose="isClose"
            :destroyOnClose="true">
            <template #title>
                <span>提取视频文案</span>
            </template>

            <template #content>
                <div class="content_box">
                    <div class="video_form">
                        <span>视频来源:</span>
                        <a-radio-group v-model:value="state.from_type">
                            <a-radio :value="1">网络视频</a-radio>
                            <a-radio :value="0">素材库视频</a-radio>
                        </a-radio-group>
                    </div>
                    <div class="video_link_box" v-show="state.from_type == 1">
                        <span>视频来源:</span>
                        <!-- <a-textarea v-model:value="state.text_source"
                            :placeholder="`剪辑剩余次数: ${state.splitNum}（每次消耗1条剪辑次数）`" :rows="4" /> -->
                        <a-textarea v-model:value="state.text_source" placeholder="请粘贴抖音短视频链接, 视频时长不超过20分钟" :rows="4" />
                    </div>

                    <div class="video_upload" v-show="state.from_type == 0">
                        <span class="video_title">添加素材:</span>
                        <div v-if="!state.multimedia_id" class="selectVideo" @click="addVisible = true">
                            <span class="selectVideo_content">
                                <PlusOutlined />
                                添加素材
                            </span>
                        </div>
                        <div class="video_con" v-else>
                            <video id="videoPlayer" :src="showVideoUrl" autoplay />
                            <div class="operate_con">
                                <cu-icon @click="(() => {
                                    showVideoUrl = ''
                                    state.multimedia_id = ''
                                })" type="icon-shanchu1" class="delete_icon" />
                            </div>
                        </div>
                    </div>
                    <span class="split_num" v-if="state.textg">
                        {{ state.textg }}
                    </span>
                </div>
            </template>

            <template #footer>
                <a-button @click="closeDialog">取消</a-button>
                <a-button type="primary" :loading="submitLoding" @click="handleOk">确定</a-button>
            </template>
        </baseModel>
    </div>

    <!-- 选择 素材库视频 -->
    <ChooseMaterial :isClip="false" material_type="video" :visible="addVisible" @close="closeChooseMaterial" />

    <!-- 充值弹窗 -->
    <vipModal ref="vipModalRef" :visible="vipVisible" @close="vipVisible = false"></vipModal>
</template>


<style lang="less" scoped>
.content_box {

    .split_num {
        font-size: 12px;
        color: #9f9c9c;
        margin-left: 73px;
    }

    .video_form {
        display: flex;
        gap: 15px;
    }

    .video_link_box {
        margin-top: 14px;
        margin-bottom: 12px;
        display: flex;
        gap: 15px;

        span {
            // 不换行
            white-space: nowrap;
        }
    }

    .video_upload {
        margin-top: 14px;
        display: flex;

        .video_title {
            margin-right: 15px;
            white-space: nowrap;
        }

        // 选择视频
        .selectVideo {
            height: 120px;
            width: 120px;
            background-color: #f1f3f5;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;

            .selectVideo_content {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 14px;
            }
        }

        // 视频容器
        .video_con {
            width: 150px;
            height: 250px;
            background-color: #000;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;

            .operate_con {
                display: none;
            }

            &:hover {
                .operate_con {
                    width: 150px;
                    height: 250px;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: rgba(0, 0, 0, .3);
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .play_icon {
                        color: #fff;
                        font-size: 24px;
                        cursor: pointer;

                        &:hover {
                            color: #ff5652;
                        }
                    }

                    .delete_icon {
                        color: #fff;
                        font-size: 24px;
                        cursor: pointer;

                        &:hover {
                            color: #ff5652;
                        }
                    }
                }
            }

            video {
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
}
</style>